<template>
	<view>
		<!--选择收货地址的盒子  -->
		<view class="addres-choose-box" v-if="JSON.stringify(address) ==='{}'">
			<button class="butChooseAddres" type="primary" size="mini" @click="chooseAddress" > 请选择收货地址+</button>
		</view>
		<!-- 渲染收货信息的盒子 -->
		<view class="addres-info-box" v-else @click="chooseAddress">
			
				<view class="row1">
					<view class="row1-left">
						<view class="username">收货人:{{address.userName}}</view>
					</view>
					<view class="row1-right">
						<view class="phone">电话:{{address.telNumber}}</view>
						<uni-icons type="arrowright" size="16px"></uni-icons>
					</view>
				</view>
				
				<view class="row2">
					<view class="row2-left">收货地址:</view>
					<view class="row2-right">{{addstr}}</view>
				</view>
			
		</view>
		<!-- 底部边框线 -->
		<image src="/static/cart_border@2x.png" class="address_border"></image>
		
	</view>
</template>

<script>
	import {mapState,mapMutations,mapGetters} from 'vuex'
	export default {
		name:"my-address",
		data() {
			return {
				// address:{}
			};
		},
		methods: {
			...mapMutations('m_user',['updateAddress']),
		  async chooseAddress() {
		    try {
		      // 等待地址选择成功，获取结果
		      const succ = await uni.chooseAddress();
		      // 判断是否成功（根据uni-app文档，errMsg为'chooseAddress:ok'表示成功）
		      if (succ.errMsg === 'chooseAddress:ok') {
		        console.log(succ);
		        // this.address = succ;
				this.updateAddress(succ);
		      } else {
		        // 处理用户取消选择等情况（如succ.errMsg为'chooseAddress:cancel'）
		        console.log('用户取消了地址选择');
		      }
		    } catch (err) {
		      // 处理调用失败的错误（如权限不足、接口异常）
		      console.error('地址选择失败:', err);
		    }
		  }
		},
		computed:{
			...mapState('m_user',['address']),
			...mapGetters('m_user',['addstr'])
		}

	}
</script>

<style lang="scss">
.address_border{
	display: block;
	width: 100%;
	height: 5px;
	
}
.addres-choose-box{
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}
.addres-info-box{
	font-size: 12px;
	height: 90px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 5px;
	.row1{
		display: flex;
		justify-content: space-between;
		.row1-left{
			
			.username{}
			
		}
		.row1-right{
			display: flex;
			.phone{}
		}
	}
	.row2{
		display: flex;
		
		align-items: center;
		margin-top: 10px;
		.row2-left{
			white-space: nowrap;
		}
		.row2-right{
			margin-left:6px;
		}
	}
}
</style>